<template>
    <div>
        <div class="sign-wrap">
            <div v-if="success">
                <img src="../assets/t1.png" class="f-w80 f-db sign-img1" />
                <div class="sign-form f-fs16">
                    <div v-if="isSign" class="f-tac sign-receive">
                        <h3>你已经领取过了</h3>
                        <h4 class="f-mp0">赶紧打开狐玩APP看看吧</h4>
                    </div>
                    <div v-else>
                        <p class="sign-phone"><input class="f-bt text" v-model="mobile" placeholder="请输入11位手机号" type="number"></p>
                        <div class="f-dfc sign-verify">
                            <p class="sign-number"><input class="f-bt verify-input" v-model="mobilecode" placeholder="请输入验证码" type="number"></p>
                            <input type="button" v-model="second" :disabled="isdisabled" class="verify f-bt f-w30 f-ib" @click="verify">
                        </div>
                    </div>
                    <button @click="sign" :class="['sign-btn f-fs16 f-tac f-bn f-w100',!isSign && 'sign-mb14']">{{isSign?'立即打开':'立即领取'}}</button>
                </div>
            </div>
            <div v-else>
                <img src="../assets/t2.png" class="f-w80 f-db sign-img2" />
                <p class="sign-tit f-tac">已保存至{{account}}账号</p>
                <div class="sign-rule f-bgw f-tac">
                    <h2 class="sign-text">狐玩游戏折扣平台</h2>
                    <p>网罗上千款手游，你想要的都在这里</p>
                    <p>聚合多个游戏渠道，先比点位再下载</p>
                    <p>各渠道成本折扣，不再奔波，一个App搞定</p>
                    <p>24小时在线自助充值，拒绝等待</p>
                    <p>超多平台礼包，红包福利，平民玩家也能嗨</p>
                    <p>合伙人计划，3000现金榜单大奖等你领</p>
                </div>
                <a href="//www.midoogame.com/wapauth/downapp" class="f-w80 sign-rule-btn f-fs16 f-tac f-db sign-mb14">前往体验</a>
            </div>
            <p><img src="../assets/down.jpg" class="down f-w100 f-db" /></p>
        </div>
        <div class="toast" title="提示信息" v-show="text"><p>{{text}}</p></div>
    </div>
</template>
<script>
export default {
    name:'sign',
    data(){
        return{
            isFound:false,
            isSign:false,
            success:true,
            mobile:'',
            account:'',
            mobilecode:'',
            text:'',
            second:'点击获取',
            isdisabled:false
        }
    },
    methods:{
        link(){
            location.href="//www.midoogame.com/wapauth/downapp"
        },
        toast(text){
            this.text=text;
            setTimeout(()=>{
                this.text="";
            },600)
        },
        count(){
            let curtime = 60,
                that=this,
                timer=setInterval(countDown,1000);
            function countDown(){
                let inittime=0,ctime;
                if(inittime < curtime){
                    curtime--;
                    ctime=curtime<10?'0'+curtime:curtime;
                    that.second=ctime;
                    that.isdisabled=true;
                }else{
                    that.second='重新发送';
                    that.isdisabled=false;
                    clearInterval(timer);
                }
            }
        },
        validate(){
            let phoneExp =/^1\d{10}$/,
                codeVal  = this.mobilecode.replace(/\s+/g,""),
                phoneVal = this.mobile.replace(/\s+/g,"");
            if(phoneVal.length == 0){
                this.toast('手机号不得为空');
                return false;
            }else if(!phoneExp.test(phoneVal)){
                this.toast('手机格式错误');
                return false;
            }else if(codeVal.length == 0){
                this.toast('验证码不得为空');
                return false;
            }
            return true;
        },
        verify(){
            const phoneExp=/^1\d{10}$/,
                    form=new FormData(),
                    phoneVal = this.mobile.replace(/\s+/g,"");
            if(phoneVal.length == 0){
                this.toast('手机号不得为空');
                return false;
            }else if(!phoneExp.test(phoneVal)){
                this.toast('手机格式错误');
                return false;
            }
            form.append("mobile",phoneVal)
            form.append("codetype",6);
            this.$ajax.Sign.captcha(form).then(({data:{sendmsg,sendstatus}})=>{
                if(sendstatus==='500'){
                    this.toast(sendmsg)
                }
                if(sendstatus==='200'){
                    this.count()
                }
            })
        },
        sign(){
            if(this.isSign){
                this.link();
                return false;
            }/**/
            if(this.validate()){
                const form=new FormData();
                form.append("mobile",this.mobile)
                form.append("mobilecode",this.mobilecode)
                form.append("inviteid",this.$route.params.code)
                this.$ajax.Sign.sendForm(form).then(({data:{sendmsg,sendstatus,data:{datetype}}})=>{
                    if(sendstatus==='500'){
                        this.toast(sendmsg)
                        return false;
                    }
                    if(sendstatus==='200'){
                        if(datetype==='regsuccess'){
                            this.account=`${this.mobile.substring(0,3)}****${this.mobile.substring(7)}`;
                            this.success=false;
                        }else{
                            this.isSign=true;
                        }
                        /*this.account=`${this.mobile.substring(0,3)}****${this.mobile.substring(7)}`;
                        this.isSign=true;
                        this.success=false;
                        this.$messagebox.confirm('现在去下载app吗?').then(action => {
                            if(action == 'confirm'){//点击确定下载app
                                this.$router.push('/download')
                            }else{
                                this.$router.push('/')
                            }
                        })*/
                    }
                })
            }
        }
    },
    created(){
        /*this.$ajax.Sign.check(this.$route.params.code).then(({data})=>{
            //console.log(data.sendstatus)
            if(data.sendstatus==500){
                this.isFound=true
            }
        })*/
    }
}
</script>
<style scoped lang="less">
[contenteditable = "true"], input, textarea {
    -webkit-user-select: auto!important;
    -khtml-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    -o-user-select: auto!important;
    user-select: auto!important;
}

.sign-line{
    text-decoration: underline;
}
.check-sign{
    margin: 25% auto 5%;
}
.sign-wrap{
    background:url(../assets/bg.png) top center no-repeat;
    background-size: 100%;
}
.sign-img1,.sign-img2{
    margin: 0 auto .555556rem;
}
.sign-img1{
    padding-top:1.760741rem;
}
.sign-img2{
    padding-top:1.060741rem;
}
.sign-form{
    width: 80%;
    padding: 2rem .6rem 1rem;
    height:8rem;
    margin: 0 auto;
    background: url(../assets/fbg.png) no-repeat center / 100%;
}
.sign-form p{
    padding: .223333rem .277778rem;
}
.verify{
    appearance: none;
    background: #DC1D15;
    color: #fff;
    padding:20px 0;
}
.sign-rule,.verify,.sign-phone,.sign-number{
    border-radius: 5px;
}
.verify:disabled{
    opacity: .7;
}
.sign-number{
    margin:0 .1rem 0 0;
}
.sign-phone,.sign-number{
    background-color: #F4F5F6;
}
/*.sign-form p:before{
    width:.37037rem;
    height: .37037rem;
    margin-right: .185185rem;
}*/
.sign-form p,.sign-form p input::-webkit-input-placeholder{
    color:#999999
}
.sign-form p input.text{
    width:5.555556rem;
}
.mint-button,.sign-text{
    color: #21201D;
}
.sign-receive{
    margin:1rem 0 1.5rem;
    line-height: 2;
    h3{
        margin-bottom: 0;
    }
}
.sign-text{
    border-bottom: 1px solid #E8E8E8;
    font-size: 13pt;
    padding-bottom: .3rem;
}
.sign-rule-btn,.sign-rule{
    box-shadow: 0 5px 10px #eee;
}
.sign-rule{
    margin: 0 1rem 1rem;
    padding: .5rem .3rem;
}
.sign-rule-btn{
    margin:0 auto .5rem;
}
.sign-rule-btn,.sign-btn{
    border-radius: 10px;
    padding:25px 0;
}
.sign-rule p{
    font-size: 10pt;
    line-height: 1.8;
}

.sign-tit{
    background: url(../assets/t4.png) no-repeat center / 80%;
    margin-bottom: .37037rem;
    color: #DC1D16;
    font-size: 10pt;
}
.sign-btn,.sign-rule-btn{
    background-color: #FFDF4C;
}
.sign-mb14{
    margin-top: 1.4rem;
}
.down{
    margin:.5rem auto;
}

.toast{
    display: table;
    p{
        z-index: 2;
        position: fixed;
        top:20%;
        left:50%;
        transform: translateX(-50%);
        white-space: nowrap;
        padding:15px 20px;
        border-radius: 5px;
        background-color: rgba(0,0,0,.8);
        color:#fff;
    }
    &:after{
        z-index: 1;
        content: '';
        display: block;
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height: 100%;
    }
}
</style>


